<template>
  <div class="nav">
    <!-- <router-link to="/">首页</router-link>
    <router-link to="/">新闻</router-link>
    <router-link to="/about">我的</router-link> -->
    <!-- element-ui库里面的导航 -->
    <!-- 
        el-menu
            mode="horizontal" 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式
            background-color="#545c64"  导航的背景颜色
            text-color="#fff"           导航字体颜色
            active-text-color="#ffd04b" 导航选中的高亮的字体颜色
            :default-active="activeIndex"  default-active	当前激活菜单的 index
            @select	菜单激活回调	index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
            router	是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

        el-menu-item
            菜单的每一项内容   
            index	唯一标志
            disabled 禁止

        el-submenu 
            下拉菜单 

     -->
    <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
      @select="selectMenu"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/news">新闻</el-menu-item>
      <el-menu-item index="/about">我的</el-menu-item>
      <el-menu-item index="/travel">旅游</el-menu-item>
      <!-- 右侧内容 -->
      <div class="nav-right">
        <el-button v-if="!userinfo.username" size="small" @click="login">登录</el-button>
        <template v-else>
          <span>欢迎：{{ userinfo.username }}</span>
          <i class="el-icon-switch-button" @click="loginout"></i>
        </template>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      activeIndex: "/",
    };
  },
  computed: {
    ...mapState("LoginModule", ["userinfo"]),
  },
  methods: {
    ...mapMutations("LoginModule", ["clearUser"]),
    //退出登录
    loginout() {
      //1. 清空vuex用户信息  2. 清空本地数据
      this.clearUser();
      localStorage.removeItem("userinfo");
      //跳转当前的url地址路径
      console.log('this.$route.path',this.$route.path);
      if (this.$route.path!== "/") {
        this.$router.push("/login");
      }
    },
    //登录
    login(){
      this.$router.push('/login')
    },

    selectMenu(index, path) {
      //   console.log(this);
      //   localStorage.setItem('index',index);
    },
  },
  created() {
    //   let index  = localStorage.getItem('index')
    //   if(index){
    //       this.activeIndex =index;
    //   }
  },
};
</script>

<style lang='less' scoped>
.nav {
  background: #545c64;
}
.el-menu-demo {
  width: 1200px;
  margin: 0 auto;
}
.el-menu.el-menu--horizontal {
  border-bottom: 0;
}
.nav-right {
  float: right;
  line-height: 60px;
  color: #fff;
  span {
    padding-right: 10px;
  }
  i {
    font-size: 20px;
    vertical-align: middle;
    cursor: pointer;
  }
}
</style>